<template>
  <div class="market-wrapper">
    <div class="screen-area">
      <div class="items">
        <div class="label">{{$t('m.channelName')}}</div>
        <Input class="iv-input" v-model="name" :placeholder="this.$t('m.channelName')" />
      </div>

      <div class="items">
        <div class="label">{{$t('m.channelName')}}</div>
        <Select v-model="status" :placeholder="$t('m.shàngjiàzhuàngtài')" class="iv-input">
          <Option :value="1">{{this.$t('m.AlOn')}}</Option>
          <Option :value="0">{{this.$t('m.AlOff')}}</Option>
        </Select>
      </div>

      <div style="margin-top:20px;">
        <Button class="parameter_button" style="margin-right:30px;" @click="emptyQueryInfo">{{$t('m.recycle')}}</Button>
        <Button class="parameter_button" type="primary" @click="getDiversionList">{{$t('m.cháxún')}}</Button>

        <Button class="btn-add" type="primary" @click="handleAdd">{{this.$t('m.NewChannel')}}</Button>
        <Button class="btn-switch" type="primary" @click="handleSwitch" v-if="type == 0">{{$t('mdàichāokāiguān')}}</Button>
      </div>
      

    </div>
    <div class="market-main">
      <Table border :columns="columns" :data="list" :loading="loading"></Table>

      <Page :total="total" :current.sync="page" :page-size-opts="[10, 20, 40, 80, 100]" show-total show-elevator show-sizer @on-change="pageChange" @on-page-size-change="handleSizeChange" style="margin: 15px 0;text-align: right;"></Page>
    </div>

    <dialog-operator :title="title" :formData="formData" :type="opType" v-model="modal" @cancel="handleModal1Cancel" @ok="handleModal1Ok"></dialog-operator>

    <dialog-switch v-model="modal2" @cancel="handleModal2Cancel"></dialog-switch>
  </div>
</template>

<script>
import qs from 'qs';
import { mapGetters } from 'vuex';
import { dateFormat } from '@/static/tools';
import dialogOperator from './components/dialog-operator.vue';
import dialogSwitch from './components/dialog-switch.vue';

export default {
  name: 'loanMarketList',
  data () {
    return {
      columns: [
        { title: 'ID', key: 'id', align: 'center', className: 'column-space' },
        {
          title: this.$t('m.addTime'),
          key: 'ctime',
          align: 'center',
          className: 'column-space',
          render: (h, params) => {
            return h('span', dateFormat(params.row.ctime, 'year'));
          }
        },
        { title: this.$t('m.channelName'), key: 'name', align: 'center', className: 'column-space' },//'渠道名称'
        {
          title: this.$t('m.chaLogo'),//'渠道logo'
          key: 'logo',
          align: 'center',
          className: 'column-space',
          render: (h, params) => {
            return h('img', {
              attrs: {
                src: params.row.logo
              },
              style: {
                width: '50px',
                height: '50px',
                borderRadius: '4px'
              }
            });
          }
        },
        {
          title: this.$t('m.daoliuPage'),//'导流页',
          key: 'link',
          align: 'center',
          className: 'column-space',
          render: (h, params) => {
            const { link } = params.row;
            return h('a', {
              attrs: {
                title: link,
                href: link,
                target: '_blank'
              },
              style: {
                display: 'inline-block',
                width: '100%',
                color: '#2d8cf0',
                textDecoration: 'underline',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis',
                overflow: 'hidden'
              }
            }, link);
          }
        },
        { title: this.$t('m.title'), key: 'title', align: 'center', className: 'column-space' },
        { title: this.$t('m.smti'), key: 'subTitle', align: 'center', className: 'column-space' },//'副标题'
        { title: this.$t('m.ocost'), key: 'settlePrice', align: 'center', className: 'column-space' },//收费单价
        { title: this.$t('m.maxLM'), key: 'maxLoanAmount', align: 'center', className: 'column-space' },//'最高借款额度'
        { title: this.$t('m.minLM'), key: 'minLoanAmount', align: 'center', className: 'column-space' },//'最低借款额度'
        { title: this.$t('m.loanCycle'), key: 'loanPeriods', align: 'center', className: 'column-space' }, //'借款周期'
        // {
        //   title: '借款额度',
        //   align: 'center',
        //   className: 'column-space',
        //   render: (h, params) => {
        //     const { minLoanAmount, maxLoanAmount } = params.row;
        //     return h('span', `${minLoanAmount}~${maxLoanAmount}`);
        //   }
        // },
        // { title: '借款期限', key: 'loanPeriods', align: 'center', className: 'column-space' },
        { title: this.$t('m.dayRate'), key: 'feeRateDaily', align: 'center', className: 'column-space' },//'日费率',
        { title: this.$t('m.applyNum'), key: 'applyNum', align: 'center', className: 'column-space' },//'申请人数'
        { title: this.$t('m.passRate'), key: 'passRate', align: 'center', className: 'column-space' },//'通过率'
        { title: this.$t('m.chargeModel'), key: 'settleMode', align: 'center', className: 'column-space' },//'收费模式'
        { title: '标签', key: 'tags', align: 'center', className: 'column-space' },
        {
          title: this.$t('m.jingxuan'),//'精选'
          key: 'selected',
          align: 'center',
          className: 'column-space',
          render: (h, params) => {
            const { selected } = params.row;
            return h('span', selected > 0 ? '精选' : '普通');
          }
        },
        {
          title: this.$t('m.tuijian'),//'推荐',
          key: 'recommend',
          align: 'center',
          className: 'column-space',
          render: (h, params) => {
            const { recommend } = params.row;
            return h('span', recommend > 0 ? '推荐' : '普通');
          }
        },
        {
          title: this.$t('m.operate'),//'操作'
          align: 'center',
          className: 'column-space',
          render: (h, params) => {
            const { id, name, status } = params.row;

            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '2px',
                  marginBottom: '5px'
                },
                on: {
                  click: () => {
                    this.handleEdit(params.index);
                  }
                }
              }, this.$t('m.edit')),//编辑
              h('Poptip', {
                props: {
                  confirm: true,
                  title: status == 1 ? this.$t('m.creatOff') : '你确定要上架吗？',
                  placement: 'left',
                  transfer: true
                },
                on: {
                  'on-ok': () => {
                    this.handleOffline(id, status);
                  }
                }
              }, [
                h('Button', {
                  style: {
                    marginRight: '2px',
                    marginBottom: '5px'
                  },
                  props: {
                    type: 'error',
                    size: 'small'
                  }
                }, status == 1 ? this.$t('m.xjPay') : this.$t('m.sjPay'))
              ])
            ]);
          }
        }
      ],
      list: [],
      total: 0,
      loading: true,
      status: 1,
      name: '',
      page: 1,
      pageSize: 10,
      title: '新增渠道',
      opType: '',
      modal: false,
      formData: {},
      modal2: false
    }
  },
  created () {
    this.getDiversionList();
  },
  computed: {
    ...mapGetters([
      'type'
    ])
  },
  methods: {
    emptyQueryInfo () {
      this.name = ''
      this.status = 1
      this.getDiversionList()
    },
    // 获取贷超列表
    getDiversionList (name, status) {
      var pageNumber = this.page
      var pageSize = this.pageSize
      this.loading = false;
      name = this.name
      status = this.status
      // url和if判断是页面数量和大小部分
      var url = '/api/laocai/loan-market/list' + '?' + 'name' + '=' + name + '&' + 'status' + '=' + status + '&' + 'pageNumber' + '=' + pageNumber + '&' + 'pageSize' + '=' + pageSize
      this.$http.get(url)
        .then((Response) => {
          this.list = Response.body.result.list
          if (Response.body.code == 0) {
            this.list = Response.body.result.list;
            this.total = Response.body.result.size;
          }
          this.loading = false;
        }, error => {
          console.log(error);
        });
    },
    // 新增客户
    handleAdd () {
      this.title = this.$t('m.newCust');//'11新增客户'
      this.opType = 'add';
      this.formData = {
        name: '',
        logo: '',
        link: '',
        title: '',
        subTitle: '',
        minLoanAmount: '',
        maxLoanAmount: '',
        loanPeriods: '',
        feeRateDaily: '',
        applyNum: '',
        applyCondition: '',
        sortNum: '',
        tags: '',
        passRate: '',
        // settleMode: '',
        settleMode: '',
        selected: '',
        status: '',
        recommend: '',
        description: '',
        backgroundUrl: '',
        backgroundUser: '',
        backgroundPwd: ''
      };



      this.modal = true;
    },
    // 编辑客户信息
    handleEdit (index) {
      let curObject = this.list[index];
      this.title = '编辑客户信息';
      this.opType = 'edit';
      this.formData = {
        id: curObject.id,
        name: curObject.name,
        logo: curObject.logo,
        link: curObject.link,
        title: curObject.title,
        subTitle: curObject.subTitle,
        minLoanAmount: curObject.minLoanAmount,
        maxLoanAmount: curObject.maxLoanAmount,
        loanPeriods: curObject.loanPeriods,
        feeRateDaily: curObject.feeRateDaily,
        applyNum: curObject.applyNum,
        applyCondition: curObject.applyCondition,
        sortNum: curObject.sortNum,
        tags: curObject.tags,
        passRate: curObject.passRate,
        settleMode: curObject.settleMode,
        settlePrice: curObject.settlePrice,
        selected: curObject.selected,
        status: curObject.status,
        recommend: curObject.recommend,
        description: curObject.description,
        backgroundUrl: curObject.backgroundUrl,
        backgroundUser: curObject.backgroundUser,
        backgroundPwd: curObject.backgroundPwd
      };
      this.modal = true;
    },
    // 渠道下架
    handleOffline (id, status) {
      let param = status == 1 ? 'down' : 'up';

      this.$http.post(`/api/laocai/loan-market/down`, {
        id: id
      }).then((Response) => {

        if (Response.body.code == 0) {
          let msg = status == 1 ? '渠道下架成功' : '渠道上架成功';
          this.$Message.success(msg);
          this.getDiversionList();
        }
      }, error => {
        console.log(error.statusText);
      });
    },
    // 新增 | 编辑 cancel回调函数
    handleModal1Cancel () {
      this.modal = false;
    },
    // 新增 | 编辑 success回调函数
    handleModal1Ok () {
      this.modal = false;
      this.getDiversionList();
    },
    // 分页切换
    pageChange (val) {
      this.page = val;
      this.getDiversionList();
    },
    // 每页显示数量
    handleSizeChange (val) {
      this.pageSize = val;
      this.getDiversionList();
    },
    // 贷超开关
    handleSwitch () {
      this.modal2 = true;
    },
    // 贷超开关 cancel
    handleModal2Cancel () {

    },
    // 贷超开关 ok
    handleModal2Ok () {

    }
  },
  watch: {
  },
  components: {
    dialogOperator,
    dialogSwitch
  }
}
</script>

<style lang="scss">
@import "../../static/style.css";
@import "../../static/common.scss";
.items {
  display: inline-block;
  margin-bottom: 10px;
  margin-right: 20px;
  width: 200px;

  .label {
    overflow: hidden;
    white-space: inherit;
    text-align: right;
    color: #222;
    font-size: 14px;
    margin-right: 10px;
  }
}
.market-wrapper {
  padding: 15px;

  .column-space {
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .iv-input {
    margin-right: 10px;
    width: 200px;
  }

  .btn-add {
    float: right;
  }

  .btn-switch {
    margin-right: 10px;
    float: right;
  }
}

.market-main {
  margin-top: 15px;
}
</style>
